

<div id="pagina-datos">

<script>
	jQuery.noConflict();
	
	jQuery(function() {
		jQuery( "#fecha" ).datepicker();
	});
	function guardar()
	{
		jQuery("#pagina-datos").html('Guardando.. <img src="/img/ajax-loader.gif" />');
		alert(jQuery('#horas2').serialize());
		alert(document.getElementById('horas2'));
		jQuery.post('/introducirDatosCarrera/',	
				{
					distancia: jQuery('#distancia').val(),
					horas: jQuery('#horas2').val(),
					minutos: jQuery('#minutos').val(),
					segundos: jQuery('#segundos').val(),
					fecha: jQuery('#fecha').val(),
				},	
				function(data) {
					jQuery('#pagina-datos').html(data);
		});
	}
</script>

<script type="text/javascript"> 
        jQuery(document).ready(function() 
        {
        	 var opciones = { 
        		        target: '#pagina-datos',   // target element(s) to be updated with server response 
        		        beforeSubmit:  indicator,  // pre-submit callback 
        		        //success:       showResponse  // post-submit callback 
        		    }; 
        	jQuery('#formCalculo').ajaxForm(opciones); 
        }); 
        
        function indicator(formData, jqForm, options) { 
        	jQuery("#pagina-datos").html('Guardando.. <img src="/img/ajax-loader.gif" />');
        }
            
          
    </script> 
    
<div id="eee" ></div>

<p>Introduce los datos de tu recorrido</p>
<p>Luego podras realizar estadisticas con ellos y ver tu evolucion</p>

	<div style="margin-top: 15px" >
		<div style="margin-top:15px" id="dialogform">	
		<form name="formCalculo" id="formCalculo" action="/introducirDatosCarrera/" method="post" >
		<fieldset>
			<legend>Almacena los datos de tu recorrido</legend>
			<p><label for="distancia">Distancia: </label> <input id="distancia" type="text" name="distancia" /> metros </p> 
			<p>Tiempo:
				<input id="horas" type="text" name="horas" size="2" /> horas
				<input id="minutos" type="text" name="minutos" size="2" /> mins
				<input id="segundos" type="text" name="segundos" size="2" /> segs
			</p>
			<p><label for="fecha">Fecha: </label> <input id="fecha" type="text" name="fecha" /> </p> 
			TODO: VALIDACIONES DE ESTE FORMULARIO
			<br/> TODO: estilo del boton
			<input type="submit" value="Guardar" /> 
		</fieldset>
		</form>
		</div>
	</div>
	
</div>